<template>
  <div>
    <header style="overflow: hidden">
      <div class="headerone">
        <div class="same">
          <div class="headers">
            <div class="headerLeft">
              <!-- <i class="addresIcon">D</i>
              <span class="addresName">沈阳市政府</span>
              <i class="addresSelect">X</i> -->
              <Position></Position>
            </div>
            <div class="headerTwo">
              <input type="text" placeholder="请输入要搜索的门店" />
            </div>
          </div>
        </div>
      </div>
      <div class="header">
        <div class="same">
          <div class="headerBottom">
            <div class="list">
              <i class="twoIcon"
                ><svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-zaixianwenzhen-01"></use></svg
              ></i>
              <p class="twoTitle">在线问诊</p>
              <p class="inf">职业兽医 响应迅速</p>
            </div>
            <div class="list">
              <router-link to="/hospital_lists">
                <i class="twoIcon"
                  ><svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-guahao1"></use></svg
                ></i>
                <p class="twoTitle">预约挂号</p>
                <p class="inf">千家连锁 技术专业</p></router-link
              >
            </div>
            <div class="list">
              <i class="twoIcon"
                ><svg class="icon" aria-hidden="true">
                  <use
                    xlink:href="#icon-xizao
"
                  ></use></svg
              ></i>
              <p class="twoTitle">预约洗美</p>
              <p class="inf">贴心服务 保障无忧</p>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="content">
      <div class="same">
        <div class="contentTwo">
          <div class="medical">
            <i
              ><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-serviceyuanchengfuwu"></use></svg
            ></i>
            <div>
              <span>远程医疗</span>
              <p>专家远程 省时省心</p>
            </div>
          </div>
          <router-link to="/DoctorList">
            <div class="whole">
              <i
                ><svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang"></use></svg
              ></i>
              <div>
                <span>全国名医</span>
                <p>全国名医 在线挂号</p>
              </div>
            </div>
          </router-link>
        </div>
        <div class="famous">
          <div class="top">
            <span class="left">本地名医</span>
            <router-link to="/DoctorList"
              ><span class="right"> <span>更多名医></span> </span></router-link
            >
          </div>
          <van-empty
            v-show="doctor.length == 0"
            image="network"
            description="网络错误"
            :style="{ padding: 0, color: '#FFF' }"
          />
          <div class="buttom">
            <router-link
              class="card"
              v-for="item in doctor"
              :key="item.doctorId"
              :to="'/doctordetail/' + item.doctorId"
            >
              <div class="left">
                <img
                  src="https://img0.baidu.com/it/u=224081144,463462312&fm=26&fmt=auto"
                  alt=""
                />
                <span class="time">从业 {{ item.doctorTime }} 年</span>
              </div>
              <div class="right">
                <p class="rightTop">
                  <span class="name">{{ item.doctorName }}</span
                  ><span class="rank">{{ item.doctorRank }}</span>
                </p>
                <p class="rightButtom">
                  专长：<span
                    class="lable"
                    v-for="(i, index) in item.doctor_merit"
                    :key="i.name"
                  >
                    {{ i.name
                    }}<span v-show="index !== item.doctor_merit.length - 1"
                      >、</span
                    ></span
                  >
                </p>
              </div>
            </router-link>
          </div>
        </div>
        <div class="contentff">
          <div class="title">
            <span class="left">专科门诊</span>
          </div>
          <div class="scroll">
            <div class="fifteen">
              <dl class="term" v-for="item in merit" :key="item.merit_id">
                <router-link :to="'/Hospital_list/' + item.merit_name">
                  <dt>
                    <i
                      ><svg class="icon" aria-hidden="true">
                        <use :xlink:href="item.ico"></use></svg
                    ></i>
                  </dt>
                  <dd>
                    <span>{{ item.merit_name }}</span>
                  </dd>
                </router-link>
              </dl>
            </div>
          </div>
        </div>
        <div class="center">
          <span>中心医院</span>
          <van-empty
            v-show="hospital_list.length == 0"
            image="network"
            description="网络错误"
            :style="{ padding: 0, color: '#FFF' }"
          />
          <div class="cardlist">
            <div
              class="card"
              v-for="item in hospital_list"
              :key="item.id"
              v-show="item.hospitalCenter == '中心医院'"
            >
              <router-link :to="'/Store_detail/' + item.hospitalId">
                <div class="top">
                  <img
                    src="https://img1.baidu.com/it/u=454388117,3355633511&fm=26&fmt=auto"
                    alt=""
                  />
                  <div>
                    <p class="first">
                      <span
                        class="lable"
                        v-show="item.hospitalCenter == '中心医院'"
                        >中心医院</span
                      ><span class="title">{{ item.hospitalName }}</span>
                    </p>
                    <p class="address">{{ item.hospitalAddress }}</p>
                  </div>
                </div>
                <div class="buttom">
                  <div class="leftbottom">
                    <i
                      ><svg class="icon" aria-hidden="true">
                        <use
                          xlink:href="#icon-weizhi"
                          style="color: #ccc"
                        ></use></svg></i
                    ><span>15.60km</span>
                  </div>
                  <div class="btnlist">
                    <button class="consultant">咨询医院</button>
                    <button class="meet">
                      <router-link :to="'/Register/' + item.hospitalId"
                        >预约挂号</router-link
                      >
                    </button>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
        </div>
        <div class="ten">
          <div>
            <dl v-for="item in tab" :key="item.id">
              <dt>
                <img :src="item.img" alt="" />
                <p>{{ item.name }}</p>
              </dt>
              <dd></dd>
            </dl>
          </div>
          <!--  -->
          <div></div>
          <!--  -->
        </div>
        <div class="hospital">
          <van-empty
            v-show="hospital_list.length == 0"
            image="network"
            description="网络错误"
            :style="{ padding: 0, color: '#FFF' }"
          />
          <div class="top" v-for="item in hospital_list" :key="item.doctorId">
            <router-link :to="'/Store_detail/' + item.hospitalId">
              <img
                src="https://img1.baidu.com/it/u=454388117,3355633511&fm=26&fmt=auto"
                alt=""
              />
              <div class="righttop">
                <p class="title">{{ item.hospitalName }}</p>
                <p class="address">
                  <span class="addresstitle">{{ item.hospitalAddress }}</span>
                  <span
                    ><i
                      ><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weizhi"></use></svg></i
                    ><span>2.26km</span></span
                  >
                </p>
                <div class="tabss">
                  <span v-for="its in item.hospital_lable" :key="its.name">{{
                    its.name
                  }}</span>
                </div>
                <!-- <router-link to="/"> -->
                <div class="list">
                  <div
                    class="activity"
                    v-for="it in item.hospital_commodits"
                    :key="it.id"
                  >
                    <div class="activitylist">
                      <p class="title">
                        {{ it.shopName }}
                      </p>
                      <p class="prcieAndCount">
                        <span
                          ><span class="price">￥{{ it.shopPrice }}.00</span
                          ><span
                            style="text-decoration: line-through"
                            class="oldprice"
                            >460.00</span
                          >
                        </span>
                        <span class="count">半年消费784</span>
                      </p>
                    </div>
                  </div>
                  <button>查看更多商品></button>
                </div>
                <!-- </router-link> -->
              </div></router-link
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Position from "../../components/Position.vue";
import { doctorlist } from "../../api/doctor";
import { selecthospitals } from "../../api/hospital";
export default {
  components: { Position },
  data() {
    return {
      doctor: [],
      tab: [
        {
          id: 1,
          img: "https://img0.baidu.com/it/u=318938142,2808879615&fm=26&fmt=auto",
          name: "全部",
        },
        {
          id: 2,
          img: "https://img0.baidu.com/it/u=318938142,2808879615&fm=26&fmt=auto",
          name: "驱虫",
        },
        {
          id: 3,
          img: "https://img0.baidu.com/it/u=318938142,2808879615&fm=26&fmt=auto",
          name: "体检",
        },
        {
          id: 4,
          img: "https://img0.baidu.com/it/u=318938142,2808879615&fm=26&fmt=auto",
          name: "疫苗",
        },
        {
          id: 5,
          img: "https://img0.baidu.com/it/u=318938142,2808879615&fm=26&fmt=auto",
          name: "洁牙",
        },
        {
          id: 6,
          img: "https://img0.baidu.com/it/u=318938142,2808879615&fm=26&fmt=auto",
          name: "绝育",
        },
        {
          id: 7,
          img: "https://img0.baidu.com/it/u=318938142,2808879615&fm=26&fmt=auto",
          name: "美容",
        },
        {
          id: 8,
          img: "https://img0.baidu.com/it/u=318938142,2808879615&fm=26&fmt=auto",
          name: "SPA",
        },
        {
          id: 9,
          img: "https://img0.baidu.com/it/u=318938142,2808879615&fm=26&fmt=auto",
          name: "贴心服务",
        },
      ],
      merit: [
        { merit_id: 1, merit_name: "内科", ico: "#icon-yaoxiang" },
        { merit_id: 2, merit_name: "皮肤科", ico: "#icon-pifuke" },
        { merit_id: 3, merit_name: "猫科", ico: "#icon-meiduanmao" },
        { merit_id: 4, merit_name: "肿瘤科", ico: "#icon-zhongliuke" },
        { merit_id: 5, merit_name: "心脏科", ico: "#icon-xinzang" },
        { merit_id: 6, merit_name: "牙科", ico: "#icon-yake" },
        { merit_id: 7, merit_name: "眼科", ico: "#icon-yanke" },
        { merit_id: 8, merit_name: "神经科", ico: "#icon-shenjingke" },
        { merit_id: 9, merit_name: "异宠科", ico: "#icon-twitter" },
        { merit_id: 10, merit_name: "中医授课", ico: "#icon-zhongyike" },
        { merit_id: 11, merit_name: "外科", ico: "#icon-shoushu" },
        { merit_id: 12, merit_name: "骨科", ico: "#icon-yundongguke" },
        { merit_id: 13, merit_name: "影像科", ico: "#icon-yingxiangke" },
        { merit_id: 14, merit_name: "麻醉科", ico: "#icon-mazuike" },
        { merit_id: 15, merit_name: "马科", ico: "#icon-muma" },
      ],
      hospital_list: [],
    };
  },
  methods: {
    getdoctor() {
      doctorlist().then((res) => {
        res.data.data.filter((item) => {
          if (item.doctorLable === "本地名医") {
            this.doctor.push(item);
          }
        });
      });
    },
    getheaders() {
      let headers = document.querySelector(".headerone");
      // console.log(headers);
      window.onscroll = function () {
        if (document.documentElement.scrollTop > 20) {
          headers.style.background = "#02ce83";
        } else {
          headers.style.background = "transparent";
        }
      };
    },
    getcenterhospital() {
      selecthospitals().then((res) => {
        // console.log(res.data.data);
        this.hospital_list = res.data.data;
      });
    },
  },
  mounted() {
    this.getcenterhospital();
    this.getdoctor();
    this.getheaders();
  },
};
</script>
<style scoped lang="scss">
header {
  background: url("https://i.loli.net/2021/12/02/9ijEOQefnVwMKo6.jpg")
    rgba(0, 0, 0, 0.3) no-repeat;
  background-size: 100%;
}
.headerone {
  background: transparent;
  z-index: 2;
  width: 100%;
  position: fixed;
  top: 0;
  .headerLeft {
    width: 30vw;
    color: #fff;
    // font-size: 4.2vw;
    // padding: 4.2vh 0;
    .addresName {
      padding: 0 0.7vh;
    }
  }
  .headerTwo {
    padding-bottom: 2.2vh;
    display: flex;
    justify-content: center;
    input {
      background: url(../../font/font/select.png) #fff no-repeat 2.7vw 2.7vw;
      background-size: 4.3vw;
      border: 0;
      width: 100%;
      // width: 88vw;
      font-size: 3vw;
      padding: 1.7vh;
      border-radius: 2.5vh;
      text-indent: 1.3rem;
      color: rgb(71, 71, 71);
    }
  }
}
.header {
  margin-top: 18vh;
  .headerBottom {
    padding: 2vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 1.5vh;
    .list {
      a {
        color: #c1c1c1;
      }
      text-align: center;
      font-size: 1.8vw;
      color: #c1c1c1;
      .twoIcon {
        font-size: 10vw;
      }
      .twoTitle {
        padding: 0.45vh 0 0.1vh 0;
        font-size: 1.4vw;
        color: #333;
      }
    }
  }
}
.content {
  background: #f7f7f7;
  // height: 200vh;
  margin-bottom: 20vh;
  .contentTwo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .medical {
      margin-top: 2vh;
      display: flex;
      justify-content: center;
      font-size: 1vw;
      background: linear-gradient(45deg, #5fdf7d, #31d192);
      border-radius: 1vh;
      color: #fff;
      padding: 2vh 1.7vh;
      i {
        font-size: 12vw;
      }
      span {
        padding-left: 1vh;
        font-size: 5.5vw;
      }
      p {
        padding-left: 1vh;
      }
    }
    .whole {
      margin-top: 2vh;
      display: flex;
      justify-content: center;
      font-size: 1vw;
      background: linear-gradient(45deg, #4dbfff, #49a3fd);
      border-radius: 1vh;
      color: #fff;
      padding: 2vh 1.8vh;
      i {
        font-size: 12vw;
      }
      span {
        padding-left: 1vh;
        font-size: 5.5vw;
      }
      p {
        padding-left: 1vh;
      }
    }
  }
  .famous {
    color: #eee;
    font-size: 4.5vw;
    margin-top: 2vh;
    padding: 2vh 0 2.5vh 0;
    background: url("https://i.loli.net/2021/12/02/XDzyuqBlJ78QvtN.jpg")
      no-repeat;
    background-size: 100%;
    border-radius: 1vh;
    .top {
      display: flex;
      justify-content: space-between;
      margin: 0 2vh;
      .right {
        font-size: 1vw;
        background: #e7e7e793;
        padding: 0.4vh 1.2vh;
        color: rgba(65, 65, 65, 0.678);
        border-radius: 3vh;
      }
    }
    .buttom {
      white-space: nowrap;
      overflow-x: scroll;
      overflow-y: hidden;
      display: flex;
      .card {
        float: left;
        margin-left: 2vh;
        border-radius: 1vh;
        margin-top: 2vh;
        padding: 2vh 1.6vh;
        font-size: 1vw;
        display: flex;
        align-items: center;
        background: #fff;
        .left {
          // background: #49a3fd;
          position: relative;
          img {
            width: 9vh;
            border-radius: 50%;
          }
          .time {
            color: #fff;
            transform: scale(0.8);
            background: #02ce83;
            border-radius: 5vh;
            padding: 0.2vh 1vh;
            position: absolute;
            left: -0.5vw;
            bottom: 0;
          }
        }
        .right {
          width: 22vh;
          padding-left: 2vh;
          .rightTop {
            color: #333;
            margin-bottom: 0.5vh;
            .name {
              font-size: 5vw;
            }
            .rank {
              font-size: 4vw;
              padding-left: 1vh;
            }
          }
          .rightButtom {
            font-size: 1vw;
            color: #c1c1c1;
            display: flex;
            flex-wrap: wrap;
            .lable {
              display: block;
            }
          }
        }
      }
    }
  }
  .contentff {
    background: #fff;
    margin-top: 2vh;
    border-radius: 1vh;
    padding: 2vh;
    font-size: 4.5vw;

    .scroll {
      overflow: hidden;
      overflow-x: scroll;
      .fifteen {
        width: 115vw;
        display: flex;
        flex-wrap: wrap;
        .term {
          // margin-right: vw;
          padding: 1.5vh 0;
          width: 14vw;
          text-align: center;
          a {
            color: #333;
            dt i {
              font-size: 6.5vw;
            }
            dd span {
              font-size: 3.5vw;
            }
          }
        }
      }
    }
  }
  .center {
    background: #31d192;
    padding: 2vh;
    border-radius: 1vh;
    margin-top: 2vh;
    font-size: 4.5vw;
    color: #fff;
    .cardlist {
      white-space: nowrap;
      overflow-x: scroll;
      overflow-y: hidden;
      display: flex;
      .card {
        margin-right: 2.5vw;
        margin-top: 2vh;
        border-radius: 1vh;
        background: #fff;
        padding: 1vh;
        color: #333;
        padding: 2.5vh;
        width: 74vw;
        a {
          color: #333;
        }
        .top {
          display: flex;
          justify-content: space-between;
          img {
            width: 14vw;
            height: 7.7vh;
            border-radius: 1vh;
            margin-right: 2vw;
          }
          .first {
            display: flex;
            padding-bottom: 1.2vh;
            .lable {
              font-size: 2vh;
              color: #fff;
              background: rgb(247, 183, 46);
              padding: 0.25vh 0.5vh;
              transform: scale(0.98);
              border-radius: 0.5vh;
            }
            .title {
              margin-left: 2.5vw;
              display: inline-block;
              width: 40vw;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .address {
            padding-bottom: 2.2vh;
            font-size: 3.5vw;
            width: 57vw;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .buttom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .leftbottom {
            columns: #ccc;
            font-size: 3vw;
          }
          .btnlist {
            padding-left: 6vw;
            .consultant {
              border-radius: 0.5vh;
              font-size: 3.5vw;
              color: #31d192;
              background: #fff;
              border: 0.2vw solid #31d192;
              // padding: 0.7vh 4vw;
              width: 23vw;
              height: 4.5vh;
              margin-right: 2vw;
            }
            .meet {
              a {
                color: #fff;
              }
              border-radius: 0.5vh;
              font-size: 3.5vw;
              color: #fff;
              background: #31d192;
              border: 0.2vw solid #31d192;
              width: 23vw;
              height: 4.5vh;
            }
          }
        }
      }
    }
  }
  .ten {
    padding-top: 2vh;
    text-align: center;
    overflow: hidden;
    overflow-x: scroll;
    padding-bottom: 2vh;
    div {
      width: 135vw;
      display: flex;
      dl {
        width: 13vw;
        margin-right: 2vw;
      }
      dt img {
        width: 5vh;
        border-radius: 50%;
      }
      p {
        font-size: 1.4vw;
      }
    }
  }
  .hospital {
    background: #fff;
    padding: 2vh;
    border-radius: 1vh;
    margin-bottom: 1.5vh;
    .top a {
      color: #333;
      margin-bottom: 4vw;
      display: flex;
      justify-content: space-between;
      img {
        width: 14vw;
        height: 7.7vh;
        border-radius: 1vh;
      }
      .righttop {
        .title {
          font-size: 4.3vw;
        }
        .address {
          margin: 0.6vh 0;
          width: 72vw;
          display: flex;
          justify-content: space-between;
          font-size: 3.1vw;
          .addresstitle {
            width: 45vw;
            overflow: hidden;
            white-space: nowrap;
          }
        }
      }
      .list {
        .activity {
          // background: chartreuse;
          font-size: 1.3vw;
          border-bottom: 0.1vh solid rgba(204, 204, 204, 0.637);
          .activitylist {
            height: 10vh;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-content: center;
          }
          .title {
            text-overflow: ellipsis;
            overflow: hidden;
            width: 72vw;
            white-space: nowrap;
            font-size: 3.6vw;
          }
          .prcieAndCount {
            display: flex;
            justify-content: space-between;
            .price {
              display: inline-block;
              color: red;
              margin-right: 1.5vw;
            }
            .oldprice {
              color: #c1c1c1;
            }
          }
          .count {
            color: #ccc;
          }
        }
        button {
          border: 0;
          background: transparent;
          color: #ccc;
          font-size: 1.2vw;
        }
      }
    }
    .tabss {
      margin-bottom: 2vh;
      span {
        display: inline-block;
        transform: scale(0.9);
        background: rgba(230, 228, 228, 0.89);
        font-size: 1vw;
        color: #8b8b8b;
        margin-right: 0.5vw;
        padding: 0.2vh 0.9vw;
      }
    }
  }
}
</style>